/**
 * @deprecated 此组件已被弃用，请使用 Ant Design 的 Select 组件替代。
 */

import React, { useEffect, useState, useRef } from "react";
import { Tag } from "antd";
import { User } from "../../types/user";

import { SearchOutlined, CloseCircleOutlined } from "@ant-design/icons";
import "./style.less";

export interface SearchTagSelectProps {
  /** 输入框占位符 */
  placeholder?: string;
  /** 选项数据 - 仅用于显示已选中的项 */
  selectedOptions: User[];
  /** 值变化时的回调 */
  onChange?: (value: User[]) => void;
  /** 搜索回调 */
  onSearch?: (value: string) => void;

  /** 是否禁用 */
  disabled?: boolean;
  /** 是否允许清空选项 */
  allowClear?: boolean;

  /** 搜索框的值 */
  searchValue?: string;
  /** 禁止移除标签 */
  disabledRemove?: boolean;

  /** 自定义标签渲染 */
  renderTag?: (option: User) => React.ReactNode;
}

/**
 * 搜索标签选择器组件
 *
 * 用于展示已选项的标签，并提供搜索输入功能，不包含下拉选择逻辑
 */
const SearchTagSelect: React.FC<SearchTagSelectProps> = ({
  placeholder = "请输入搜索关键字",
  selectedOptions = [],
  onChange,
  onSearch,
  disabled = false,
  disabledRemove = false,
  allowClear = true,
  searchValue,
  renderTag,
}) => {
  // 内部状态
  const [inputValue, setInputValue] = useState(searchValue || "");
  const inputRef = useRef<HTMLInputElement>(null);

  // 当外部searchValue变化时更新输入框值
  useEffect(() => {
    if (searchValue !== undefined) {
      setInputValue(searchValue);
    }
  }, [searchValue]);

  // 处理清空所有选中项
  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation();
    onChange?.([]);
    setInputValue("");

    // 聚焦回输入框
    setTimeout(() => {
      inputRef.current?.focus();
    }, 0);
  };

  // 处理移除单个标签
  const handleRemove = (id: number) => {
    const updatedOptions = selectedOptions.filter((option) => option.id !== id);
    onChange?.(updatedOptions);
  };

  // 处理输入框变化
  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setInputValue(value);

    // 触发搜索回调
    onSearch?.(value);
  };

  // 渲染标签
  const renderTags = () => {
    const tagsToRender = selectedOptions;

    return tagsToRender.map((option) => (
      <Tag
        key={option.id}
        className="search-tag"
        closable={!disabled && !disabledRemove}
        onClose={() => handleRemove(option.id)}
        bordered={false}
      >
        {renderTag ? (
          renderTag(option)
        ) : (
          <span className="tag-label">{option.name}</span>
        )}
      </Tag>
    ));
  };

  return (
    <div className={`search-tag-select ${disabled ? "disabled" : ""}`}>
      <div
        className="search-tag-select-wrapper"
        onClick={() => inputRef.current?.focus()}
      >
        <div className="tags-container">
          {renderTags()}
          <div className="input-container">
            <input
              ref={inputRef}
              type="text"
              className="search-input"
              value={inputValue}
              onChange={handleInputChange}
              placeholder={placeholder}
              disabled={disabled}
            />
          </div>
        </div>
        <div className="suffix-container">
          {allowClear && selectedOptions.length > 0 && (
            <CloseCircleOutlined className="clear-icon" onClick={handleClear} />
          )}
          {/* <SearchOutlined className="search-icon" /> */}
        </div>
      </div>
    </div>
  );
};

export default SearchTagSelect;
